<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">表单列表</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">管理系统表单和配置</p>
            </div>
            <button class="btn-primary flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                新建表单
            </button>
        </div>

        <!-- 表单统计 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="card text-center">
                <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{{ totalForms }}</div>
                <div class="text-gray-600 dark:text-gray-400">总表单数</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">{{ activeForms }}</div>
                <div class="text-gray-600 dark:text-gray-400">启用表单</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">{{ totalSubmissions }}</div>
                <div class="text-gray-600 dark:text-gray-400">总提交数</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2">{{ todaySubmissions }}</div>
                <div class="text-gray-600 dark:text-gray-400">今日提交</div>
            </div>
        </div>

        <!-- 搜索和筛选 -->
        <div class="card">
            <div class="flex flex-col md:flex-row gap-4">
                <div class="flex-1">
                    <div class="relative">
                        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                        <input type="text" placeholder="搜索表单名称..." class="input pl-10" />
                    </div>
                </div>
                <div class="flex gap-2">
                    <select class="input">
                        <option>所有状态</option>
                        <option>启用</option>
                        <option>禁用</option>
                        <option>草稿</option>
                    </select>
                    <select class="input">
                        <option>所有分类</option>
                        <option>用户注册</option>
                        <option>意见反馈</option>
                        <option>申请表单</option>
                        <option>调查问卷</option>
                    </select>
                    <button class="btn-secondary">筛选</button>
                </div>
            </div>
        </div>

        <!-- 表单列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="form in forms" :key="form.id"
                 class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div :class="getFormIconClass(form.category)"
                             class="w-12 h-12 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="form.icon" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ form.name }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ form.description }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span :class="getStatusBadgeClass(form.status)">
                            {{ getStatusText(form.status) }}
                        </span>
                    </div>
                </div>

                <div class="space-y-3 mb-4">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">字段数量</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ form.fieldCount }} 个</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">提交次数</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ form.submissionCount }} 次</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">创建时间</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ form.createdAt }}</span>
                    </div>
                </div>

                <!-- 表单预览 -->
                <div class="mb-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">表单预览</h4>
                    <div class="space-y-2">
                        <div v-for="field in form.fields.slice(0, 3)" :key="field.id"
                             class="flex items-center gap-2 text-xs">
                            <span class="text-gray-500 dark:text-gray-400">{{ field.label }}</span>
                            <span :class="getFieldTypeClass(field.type)">{{ field.type }}</span>
                        </div>
                        <div v-if="form.fields.length > 3" class="text-xs text-gray-500 dark:text-gray-400 text-center">
                            还有 {{ form.fields.length - 3 }} 个字段...
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button class="flex-1 btn-secondary text-sm">编辑</button>
                    <button class="flex-1 btn-primary text-sm">预览</button>
                    <button class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="flex items-center justify-center">
            <div class="flex items-center gap-2">
                <button class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-50"
                        disabled>
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button class="px-3 py-2 bg-blue-600 text-white rounded-lg">1</button>
                <button
                        class="px-3 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">2</button>
                <button
                        class="px-3 py-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">3</button>
                <button class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="lowcode-forms">
import { ref, computed } from 'vue'

defineOptions({ name: 'lowcode-forms' })

const forms = ref([
    {
        id: 1,
        name: '用户注册表单',
        description: '新用户注册信息收集',
        category: 'user',
        status: 'active',
        fieldCount: 8,
        submissionCount: 156,
        createdAt: '2024-01-01',
        icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
        fields: [
            { id: 1, label: '用户名', type: 'input' },
            { id: 2, label: '邮箱', type: 'input' },
            { id: 3, label: '密码', type: 'input' },
            { id: 4, label: '确认密码', type: 'input' },
            { id: 5, label: '性别', type: 'radio' },
            { id: 6, label: '兴趣爱好', type: 'checkbox' },
            { id: 7, label: '个人简介', type: 'textarea' },
            { id: 8, label: '同意条款', type: 'checkbox' }
        ]
    },
    {
        id: 2,
        name: '意见反馈表单',
        description: '用户意见和问题反馈',
        category: 'feedback',
        status: 'active',
        fieldCount: 6,
        submissionCount: 89,
        createdAt: '2024-01-05',
        icon: 'M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z',
        fields: [
            { id: 1, label: '反馈类型', type: 'select' },
            { id: 2, label: '标题', type: 'input' },
            { id: 3, label: '详细描述', type: 'textarea' },
            { id: 4, label: '联系方式', type: 'input' },
            { id: 5, label: '优先级', type: 'radio' },
            { id: 6, label: '附件上传', type: 'file' }
        ]
    },
    {
        id: 3,
        name: '产品申请表单',
        description: '产品试用和购买申请',
        category: 'application',
        status: 'active',
        fieldCount: 10,
        submissionCount: 234,
        createdAt: '2024-01-10',
        icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
        fields: [
            { id: 1, label: '公司名称', type: 'input' },
            { id: 2, label: '联系人', type: 'input' },
            { id: 3, label: '联系电话', type: 'input' },
            { id: 4, label: '邮箱地址', type: 'input' },
            { id: 5, label: '产品类型', type: 'select' },
            { id: 6, label: '使用人数', type: 'input' },
            { id: 7, label: '预算范围', type: 'select' },
            { id: 8, label: '使用场景', type: 'textarea' },
            { id: 9, label: '期望功能', type: 'textarea' },
            { id: 10, label: '申请时间', type: 'input' }
        ]
    },
    {
        id: 4,
        name: '满意度调查',
        description: '用户满意度问卷调查',
        category: 'survey',
        status: 'draft',
        fieldCount: 12,
        submissionCount: 67,
        createdAt: '2024-01-15',
        icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
        fields: [
            { id: 1, label: '整体满意度', type: 'radio' },
            { id: 2, label: '功能完整性', type: 'radio' },
            { id: 3, label: '界面友好性', type: 'radio' },
            { id: 4, label: '性能表现', type: 'radio' },
            { id: 5, label: '客户服务', type: 'radio' },
            { id: 6, label: '价格合理性', type: 'radio' },
            { id: 7, label: '推荐意愿', type: 'radio' },
            { id: 8, label: '改进建议', type: 'textarea' },
            { id: 9, label: '使用频率', type: 'select' },
            { id: 10, label: '主要用途', type: 'checkbox' },
            { id: 11, label: '遇到的问题', type: 'textarea' },
            { id: 12, label: '联系方式', type: 'input' }
        ]
    }
])

const totalForms = computed(() => forms.value.length)
const activeForms = computed(() => forms.value.filter(form => form.status === 'active').length)
const totalSubmissions = computed(() => forms.value.reduce((sum, form) => sum + form.submissionCount, 0))
const todaySubmissions = computed(() => 23) // 假设今日提交数

function getFormIconClass(category: string) {
    const classes = {
        'user': 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400',
        'feedback': 'bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-400',
        'application': 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400',
        'survey': 'bg-orange-100 text-orange-600 dark:bg-orange-900 dark:text-orange-400'
    }
    return classes[category as keyof typeof classes] || classes['user']
}

function getStatusBadgeClass(status: string) {
    const classes = {
        'active': 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full',
        'inactive': 'px-2 py-1 bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400 text-xs rounded-full',
        'draft': 'px-2 py-1 bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400 text-xs rounded-full'
    }
    return classes[status as keyof typeof classes] || classes['inactive']
}

function getStatusText(status: string) {
    const texts = {
        'active': '启用',
        'inactive': '禁用',
        'draft': '草稿'
    }
    return texts[status as keyof typeof texts] || '未知'
}

function getFieldTypeClass(type: string) {
    const classes = {
        'input': 'px-1 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded',
        'textarea': 'px-1 py-0.5 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded',
        'select': 'px-1 py-0.5 bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400 text-xs rounded',
        'radio': 'px-1 py-0.5 bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400 text-xs rounded',
        'checkbox': 'px-1 py-0.5 bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400 text-xs rounded',
        'file': 'px-1 py-0.5 bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400 text-xs rounded'
    }
    return classes[type as keyof typeof classes] || classes['input']
}
</script>